<?php ?>
		<h2 class="demoHeader">iPhone Picker Date Edit Component</h2>
		<div id="dateEditDemoContainer">
			<div id="dateSlotContainer" style="float:left"></div>
			<div id="hourSlotContainer" style="float:left"></div>
			<script type="text/javascript">
			var dateTimeEdit = new DateTimeSlots("dateSlotContainer", "hourSlotContainer");
			function getDate()
			{
				alert(dateTimeEdit.getValue().toLocaleString());
			}
			function setDate()
			{
				dateTimeEdit.setValue(new Date());
			}
			</script>
		</div>
		<div class="demoExplanations">
			<center>
			<input type="button" value=" Get Selected Date " onclick="getDate()"/>
			<input type="button" value=" Today " onclick="setDate()"/>
			</center>
			<p>Use mouse wheel over slots to change value of a slot. Drag and drop can also be used to change value of a slot. After changing slot values, press "<b>Get Selected Date</b>" button to obtain date. To locate today again simply press "<b>Today</b>" button.</p>
			<pre>
				
 <span class="keyword">var</span> dTE = <span class="keyword">new</span> DateTimeSlots(<span class="string">"dateSlotCont"</span>, <span class="string">"hourSlotCont"</span>);
 <span class="keyword">function</span> getDate() <span class="comment">// Called when "Get Selected Date" clicked</span>
 { 
    alert(dTE.getValue().toLocaleString());
 }
 <span class="keyword">function</span> setDate() <span class="comment">// Called when "Today" clicked</span>
 { 
    dTE.setValue(new Date());
 }
			</pre>
		</div>
		<h2 class="demoHeader">iPhone Picker Clock Component</h2>
		<div id="clockDemoContainer">
			<div id="clockSlotContainer" style="float:left;width:255px"></div>
			<p style="margin-left:20px;">Clock displayer is a simple demonstration of iPhone Picker Slots capabilities. Mouse events has been disabled on clock displayer slots. Because clock works standalone and doesn't need to be adjusted.</p>
			<script type="text/javascript">
			new ClockSlots("clockSlotContainer");
			</script>
			<pre style="float:left; width:400px">
				
 <span class="keyword">new</span> ClockSlots(<span class="string">"clockSlotContainer"</span>);
			</pre>
		</div>		